<script setup lang="ts" name="refund-manage">
import { useRoute, useRouter } from 'vue-router'
import UpdatedOss from '@fl/components/upLoad-oss.vue'
import { spaceV1Create, spaceV1Update, spaceV1mGet } from '@fl/api/city-service'
import { ElMessage } from 'element-plus'
import { onMounted } from 'vue'

const router = useRouter()
const route = useRoute()
const formRef = ref()
const formData = reactive({
    name: '',
    address: '',
    phone: '',
    description: '',
    image: '',

})
const rules = reactive<any>({
    name: [{ message: '请输入资源名称', required: true, trigger: 'blur' }],
    address: [{ message: '请输入地址', required: true, trigger: 'blur' }],
    phone: [{ message: '请输入联系电话', required: true, trigger: 'blur' }],
    image: [{ message: '请上传图片', required: true, trigger: 'blur' }],
    description: [{ message: '请输入资源介绍', required: true, trigger: 'blur' }],
})
function cancel() {
    router.back()
}
function commit() {
    // console.log('formRef', formRef.value, formData)
    formRef.value?.validate((valid, _) => {
        if (valid) {
            let _func = spaceV1Create
            if (route.query.id) {
                _func = spaceV1Update
            }
            _func(formData).then((res) => {
                console.log('res', res)
                if (res) {
                    ElMessage.success('操作成功')
                    router.back()
                }
                else {
                    ElMessage.warning(res.msg)
                }
            })
        }
    })
}

onMounted(() => {
    // console.log('onMounted', route.query, getDictOptions('type'))
    if (route.query.id) {
        spaceV1mGet(route.query.id).then((res) => {
            // console.log('res', res)
            Object.assign(formData, res)
        })
    }
})
</script>

<template>
    <ElCard class="mb-20">
        <ElForm ref="formRef"
                :model="formData"
                :rules="rules"
                label-width="120"
        >
            <ElRow>
                <ElCol :span="24">
                    <ElButton class="mb-20"
                              @click="cancel"
                    >
                        <ElIcon mr8
                                style="font-size: 19px"
                        >
                            <Back />
                        </ElIcon> 返回列表
                    </ElButton>
                </ElCol>
            </ElRow>

            <ElRow>
                <ElCol :span="10">
                    <ElFormItem label="资源名称"
                                prop="name"
                    >
                        <ElInput v-model="formData.name"
                                 placeholder="请输入资源名称"
                                 clearable
                        />
                    </ElFormItem>
                </ElCol>
            </ElRow>

            <ElRow>
                <ElCol :span="10">
                    <ElFormItem label="地址"
                                prop="address"
                    >
                        <ElInput v-model="formData.address"
                                 placeholder="请输入地址名称"
                                 clearable
                        />
                    </ElFormItem>
                </ElCol>
            </ElRow>

            <ElRow>
                <ElCol :span="10">
                    <ElFormItem label="联系电话"
                                prop="phone"
                    >
                        <ElInput v-model="formData.phone"
                                 placeholder="请输入联系电话"
                                 clearable
                                 type="number"
                        />
                    </ElFormItem>
                </ElCol>
            </ElRow>

            <ElRow>
                <ElCol :span="18">
                    <ElFormItem label="资源介绍"
                                prop="description"
                    >
                        <ElInput v-model="formData.description"
                                 maxlength="1000"
                                 show-word-limit
                                 :autosize="{ minRows: 3, maxRows: 5 }"
                                 type="textarea"
                                 placeholder="请输入内容"
                                 clearable
                        />
                    </ElFormItem>
                </ElCol>
            </ElRow>

            <ElRow>
                <ElCol :span="12">
                    <ElFormItem label="图片"
                                prop="image"
                    >
                        <UpdatedOss v-model="formData.image"
                                    accept=".png,.jpg,.jpeg"
                        />
                    </ElFormItem>
                </ElCol>
            </ElRow>

            <ElRow>
                <ElCol :span="24"
                       style="text-align: center;margin-top:40px"
                >
                    <ElButton @click="cancel">
                        取消
                    </ElButton>

                    <ElButton type="primary"
                              style="margin-left:20px"
                              @click="commit"
                    >
                        提交
                    </ElButton>
                </ElCol>
            </ElRow>
        </ElForm>
    </ElCard>
</template>

<style lang="less" scoped></style>
